<template>
  <div>
    <el-calendar v-model="value">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
          slot="dateCell"
          slot-scope="{date, data}">

        <div style="height: 100%" @click="handleClick(data.day)">
          <div>{{ data.day.split('-').slice(1).join('-') }}</div>
          <div v-if="arr.find(v=>v.date === data.day)">{{ arr.find(v => v.date === data.day).content }}</div>
        </div>

      </template>
    </el-calendar>

    <!-- 表单 -->
    <el-dialog title="日程安排" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="日常内容" :label-width="formLabelWidth">
          <el-input v-model="form.content" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹窗提醒 -->
    <el-dialog title="今日安排" :visible.sync="visible" width="30%">
<!--      <el-card>{{ content }}</el-card>-->
      <el-card>
        <div v-html="content" style="line-height: 30px;text-align: left;padding: 0 80px"></div>
        <el-button @click="saveContent" style="margin-top: 20px" type="primary">我知道le</el-button>
      </el-card>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Calender",
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      value: new Date(),
      arr: [],
      form: {},
      visible: false,
      content: '',
      date: ''
    }
  },
  created() {
    this.load();
  },
  methods: {
    //保存当前用户的状态
    saveContent(){
      this.visible = false;
      localStorage.setItem("calenderVisible",this.date)
      console.log('------>保存信息到本地')
    },
    load() {
      fetch("http://localhost:8081/calender").then(res => res.json()).then(res => {
        this.arr = res
        //尝试获取存储本地信息
        const storageDate = localStorage.getItem("calenderVisible")

        //获取当前日期
        const date = new Date().toJSON().split("T").join(' ').substr(0, 10)
        //弹窗提醒
        const data = this.arr.find(v => v.date === date)
        //增加判断条件
        if (!storageDate ||(data && storageDate != data.date) ) {
          this.content = data.content
          this.date = data.date
          this.visible = true
        }
      })
    },
    handleClick(date) {
      console.log("---->")
      this.form = {date: date}
      // this.form.content = ''
      fetch("http://localhost:8081/calender/date?date=" + date).then(res => res.text()).then(res => {
        if (res) {
          this.form = JSON.parse(res)
        }
      })
      this.dialogFormVisible = true;

    },
    save() {
      fetch("http://localhost:8081/calender", {
        method: 'post',
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify(this.form)
      }).then(res => {
        if (res.status === 200) {
          this.$message.success("设置成功");
          this.load()
          this.dialogFormVisible = false
        } else {
          this.$message.error('设置失败');
        }
      })
    },

  }
}
</script>

<style scoped>

</style>